/* eslint-disable no-unused-vars */
import { CaretRightOutlined } from "@ant-design/icons";
import React, { useState, useEffect } from "react";
import { Collapse, theme, Slider, Button, Checkbox, InputNumber } from "antd";
import DraggableControl from "@/components/DragContainer";
import { useModel } from "umi";
import { Switch } from "antd";
import Grider from "@/components/Grider";
import { Tooltip } from "antd";
import SubmitConfig from "@/components/SubmitConfig";

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;

const configs = [
  {
    type: "input",
  },
  {
    type: "textarea",
  },
];

const Library = ({ form }) => {
  //表单配置
  const {
    initialState: { formConfig, auto, submitconfig },
    setInitialState,
  } = useModel("@@initialState");

  function handleChange(val, name) {
    setInitialState((s) => ({
      ...s,
      formConfig: {
        ...s.formConfig,
        [name]: val,
      },
    }));
  }

  function setAuto(val) {
    setInitialState((s) => ({
      ...s,
      auto: val,
    }));
  }

  function setSubmitconfig(fn) {
    setInitialState((s) => {
      let res = fn(s);
      return {
        ...s,
        submitconfig: res,
      };
    });
  }

  const getItems = (panelStyle) => [
    {
      key: "2",
      label: <b>基础字段</b>,
      children: (
        <div className="grid2">
          {configs.map((config) => (
            <DraggableControl key={config.type} {...config}></DraggableControl>
          ))}
        </div>
      ),
      style: panelStyle,
    },
    {
      key: "3",
      label: <b>高级字段</b>,
      children: <p>{text}</p>,
      style: panelStyle,
    },
    {
      key: "1",
      label: (
        <div className="spread">
          <b>布局配置</b>
          <div
            onClick={(e) => e.stopPropagation()}
            style={{ userSelect: "none", marginRight: -8 }}
          >
            <Checkbox
              checked={auto}
              onChange={(e) => setAuto(e.target.checked)}
            >
              自适应
            </Checkbox>
          </div>
        </div>
      ),
      children: (
        <div>
          <div
            className="spread"
            style={{ marginBottom: 6, alignItems: "baseline" }}
          >
            <span>布局方向</span>
            <Switch
              checked={formConfig?.layout === "vertical"}
              size="small"
              onChange={(val) => {
                handleChange(!val ? "horizontal" : "vertical", "layout");
              }}
            ></Switch>
          </div>

          <div
            className="spread mt12"
            style={{ marginBottom: 6, alignItems: "baseline" }}
          >
            <span>删格布局</span>
            <Tooltip title="更新所有组件的布局方式" placement="topRight">
              <Button
                size="small"
                type="link"
                style={{ backgroundColor: "#f0f0f0" }}
                onClick={() => {
                  setInitialState((s) => {
                    return {
                      ...s,
                      formControls: s.formControls.map((it) => {
                        return {
                          ...it,
                          colProps: formConfig?.colProps,
                        };
                      }),
                      activeItem: {
                        ...s.activeItem,
                        colProps: formConfig?.colProps,
                      },
                    };
                  });
                }}
              >
                应用
              </Button>
            </Tooltip>
          </div>

          <Grider changeKey={"formConfig"}></Grider>
        </div>
      ),
      style: panelStyle,
    },
    {
      key: "4",
      label: (
        <div className="spread">
          <b>提交数据</b>
          <Button
            size="small"
            type="text"
            style={{ backgroundColor: "#f0f0f0" }}
            onClick={(e) => {
              e.stopPropagation();
              setInitialState((s) => {
                return {
                  ...s,
                  submitconfig: {
                    ...s.submitconfig,
                    result: {
                      code: "0000",
                    },
                  },
                };
              });
            }}
          >
            提交
          </Button>
        </div>
      ),
      children: (
        <SubmitConfig {...{ submitconfig, setSubmitconfig }}></SubmitConfig>
      ),
      style: panelStyle,
    },
  ];

  const { token } = theme.useToken();
  const panelStyle = {
    marginBottom: 18,
    border: "none",
  };

  return (
    <Collapse
      bordered={false}
      defaultActiveKey={["2", "3", "4"]}
      expandIcon={({ isActive }) => (
        <CaretRightOutlined rotate={isActive ? 90 : 0} />
      )}
      style={{
        background: token.colorBgContainer,
        margin: "0 12px",
      }}
      items={getItems(panelStyle)}
    />
  );
};
export default Library;
